{% load i18n static compress %}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>Cadê meu Bicho | {% block page_title %}{% trans 'Missing and for adoption pets' %}{% endblock %}</title>
  {% compress css %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/pets.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/lightbox.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
  {% endcompress %}
  {% block metatags %}{% endblock %}
  {% if not debug %}
    <script>
      (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:{{ HOTJAR_TRACKING_KEY }},hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
    <script>
      window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
      ga('create','{{ GOOGLE_API_KEY }}','auto');
      {% block ga_log_not_found %}
      ga('send', 'pageview');
      {% endblock %}
    </script>
    <script src='https://www.google-analytics.com/analytics.js' async defer></script>
  {% endif %}
</head>
<body>
<div class="navbar {% block extra_navbar_css %}{% endblock %}" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-collapse">
        <span class="sr-only">{% trans 'Toggle navigation' %}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{% url 'common:homepage' %}">
        Cadê meu Bicho
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="{% url 'meupet:index' %}">{% trans 'Pets' %}</a></li>
        <li class="hidden-sm hidden-md hidden-lg">
          <ul class="nav">
          {% for group in sidemenu %}
            {% if group.menu_items %}
              <li class="ml-30px menu-group-name">{{ group.name }}</li>
              <ul class="nav ml-30px">
                {% for menu_item in group.menu_items %}
                  <li>
                    <a href="{% url 'meupet:pet_list' group.slug menu_item.slug %}">
                      {{ menu_item }} <span class="badge">{{ menu_item.num_pets }}</span>
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
          {% endfor %}
          </ul>
        </li>
        <li><a href="{% url 'meupet:register' %}">{% trans 'Register Pet' %}</a></li>
        {% if user.is_authenticated %}
          <li><a href="{% url 'users:profile' %}">{% trans 'Profile' %}</a></li>
          <li><a href="{% url 'users:logout' %}">{% trans 'Logout' %}</a></li>
        {% else %}
          <li><a href="{% url 'users:create' %}">{% trans 'Create Account' %}</a></li>
          <li><a href="{% url 'users:login' %}">{% trans 'Login' %}</a></li>
        {% endif %}
        <li><a href="{% url 'common:about' %}">{% trans 'About' %}</a></li>
        <li><a href="{% url 'meupet:search' %}">{% trans 'Search' %}</a></li>
      </ul>
    </div>
  </div>
</div>

{% block heading %}
  <div class="heading">
    <h1 class="title-text text-center">{% block title %}{% endblock %}</h1>
  </div>
{% endblock %}

{% block page %}
  <div class="container">
    <div class="row">
      {% if messages %}
        <div class="col-md-12">
          {% for message in messages %}
            <div class="alert
                {% if message.tags %}
                  {% if 'error' in message.tags %}
                      alert-danger
                  {% else %}
                      alert-{{ message.tags }}
                  {% endif %}
                {% endif %}" role="alert">
              {{ message|safe }}
            </div>
          {% endfor %}
        </div>
      {% endif %}

      {% block body %}
        <div class="col-md-2 hidden-xs hidden-sm">
          <div class="sidebar">
            {% for group in sidemenu %}
              {% if group.menu_items %}
                <h3 class="title-text">{{ group.name }}</h3>
                <ul class="nav">
                  {% for menu_item in group.menu_items %}
                    <li><a href="{% url 'meupet:pet_list' group.slug menu_item.slug %}">
                      {{ menu_item }} <span class="badge">{{ menu_item.num_pets }}</span></a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endfor %}
          </div>
        </div>

        <div class="col-md-10">
          {% block content %}
          {% endblock content %}
        </div>
      {% endblock body %}
    </div>
  </div>
{% endblock %}

<div class="footer hidden-print">
  <div class="footer-head">
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <h2 class="title-text">Cadê meu Bicho</h2>
        </div>
        <div class="col-sm-6 text-right small-text">
          {% trans 'Made with &hearts; in Araras, São Paulo' %}
        </div>
      </div>
    </div>
  </div>

  <div class="footer-body">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h4 class="title-text">{% trans 'About' %}</h4>

          <p>{% trans 'The purpose of Cadê meu Bicho is to provide the encounter between the best or future best friends. :)' %}</p>
        </div>
        <div class="col-md-4 text-center">
          <h4 class="title-text">{% trans 'Contact' %}</h4>

          <ul class="list-unstyled">
            <li>
              <a href="mailto:contato@cademeubicho.com">contato@cademeubicho.com</a>
            </li>
          </ul>

          <ul class="list-unstyled">
            <li>
              <div class="apoia-button">
                <a href="https://apoia.se/cademeubicho" target="_blank" rel="noreferrer noopener" class="apoia-link">
                  Apoie o site no <img class="apoia-img" src="{% static 'img/apoiase_white.png' %}" alt="Logo do APOIA.se"/>
                </a>
              </div>
            </li>
          </ul>
        </div>
        <div class="col-md-4">
          <div class="fb-page" data-href="https://www.facebook.com/kdmeubicho/" data-small-header="true"
               data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
            <div class="fb-xfbml-parse-ignore">
              <blockquote cite="https://www.facebook.com/kdmeubicho/">
                <a href="https://www.facebook.com/kdmeubicho/">Cadê meu Bicho</a>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% compress js %}
  <script src="{% static 'js/jquery-2.2.4.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  <script src="{% static 'js/lightbox.js' %}"></script>
  <script src="{% static 'js/matchMedia.js' %}"></script>
  <script src="{% static 'js/pets.js' %}"></script>
  {% if not debug %}
    <div id="fb-root"></div>
    <script>(function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.5&appId=388312971328768  ";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  {% endif %}
{% endcompress %}
{% block morescripts %}{% endblock %}
</body>
</html>
